/**
 *  学习目标：Todos 案例
 */
import React, { useEffect, useState } from 'react'

export default function App() {
  const [count, setCount] = useState(0)
  const [isShow, setShow] = useState(true)
  useEffect(() => {
    document.title = `当前计数器为${count}`
    console.log('执行了多少次')
    // react-hooks\exhaustive-deps
  }, [])
  // 类似vue的watch
  useEffect(() => {
    console.log(count, '执行了多少次')
  }, [count])
  return (
    <div>
      <h1>计数器</h1>
      <h1>计数器：{count}</h1>
      <button onClick={() => setCount(count + 1)}>点击+1</button>
      <button onClick={() => setShow(!isShow)}>点击切换卡片</button>
      {isShow ? <Card /> : null}
    </div>
  )
}

function Card() {
  const fn = () => {
    console.log('窗口大小变化了')
  }
  useEffect(() => {
    console.log('组件挂载了')
    window.addEventListener('resize', fn)
  })
  useEffect(() => {
    return () => {
      console.log('组件卸载了')
      window.removeEventListener('resize', fn)
    }
  })
  return <h1>卡片切换显示</h1>
}
